import React from 'react'
import { View, Text, StyleSheet, ScrollView, Animated, Easing } from 'react-native'
import GroupItem from './groupItem'
import Search from './search'
import NavWrap from './navWrap'
import Title from '../res/components/Title'

let Dimensions = require('Dimensions')
let ScreenWidth = Dimensions.get('window').width
let groupList = []

export default class IndexWrap extends React.Component {
	static navigationOptions = ({navigation, screenProps}) => ({
		// title: null,
		// header: null
		// headerLeft: <Text onPress={() => {
		//     navigation.navigate('Hotel', {name: 'Hotel'});
		// }}></Text>
	})

	constructor(props) {
		super(props)
		this.state = {
			hotelData: [[{
				title: '酒店',
				uri: 'hotelIcon'
			}], [{
				title: '海外酒店'
			}, {
				title: '特价酒店'
			}], [{
				title: '团购'
			}, {
				title: '客栈.公寓'
			}]],
			airTicketData: [[{
				title: '机票',
				uri: 'planeIcon'
			}], [{
				title: '火车票.抢票',
			}, {
				title: '特价机票'
			}], [{
				title: '汽车票.船票'
			}, {
				title: '专车.租车'
			}]],
			tripData: [[{
				title: '旅游',
				uri: 'trapIcon'
			}], [{
				title: '目的地攻略'
			}, {
				title: '周边游'
			}], [{
				title: '邮轮旅行'
			}, {
				title: '定制旅行'
			}]],
			sinceData: [[{
				title: '景点.玩乐'
			}, {
				title: '礼品卡'
			}], [{
				title: '美食林'
			}, {
				title: 'WIFI.电话卡'
			}], [{
				title: '购物.信用卡'
			}, {
				title: '保险.签证'
			}]],
			bottomHeight: new Animated.Value(50),
			bottom: new Animated.Value(0),
		}
	}

	componentDidMount() {
		this.props.navigation.setParams({
			title: '自定义Header',
			navigatePress: this._navigatePress
		})


		/*Animated.timing(this.state.bottomHeight, {
			toValue: 0, // 目标值
			duration: 2500, // 动画时间
			easing: Easing.linear // 缓动函数
		}).start();*/

	}

	_navigatePress() {
		alert('press')
	}

	_renderTitle() {
		return (
			<Title
				navigation={this.props.navigation}
				hasLeftTitle={true}
				renderLeftTitle={
					<View>
						<Text onPress={() => {
							this.props.navigation.navigate('Hotel', {name: 'hotel'})
						}}>
							Detail
						</Text>
					</View>
				}
				titleName="Welcome"
				hasRightTitle={true}
				renderRightTitle={
					<View>
						<Title>完成</Title>
					</View>
				}
			/>
		)
	}

	onScrollBeginDrag = (e) => {
		let offSetX = e.nativeEvent.contentOffset.x;
		console.log(offSetX, 'scrollX---onScrollBeginDrag')
		Animated.parallel(['bottomHeight', 'bottom'].map(property => {
			return Animated.timing(this.state[property], {
				toValue: property == 'bottom' ? -10 : 0,
				duration: 500,
				easing: Easing.linear
			});
		})).start();
	}
	onScrollEndDrag = (e) => {
		let offSetX = e.nativeEvent.contentOffset.x;
		console.log(offSetX, 'scrollX---onScrollEndDrag')

	}
	onMomentumScrollEnd = (e) => {
		let offSetX = e.nativeEvent.contentOffset.x;
		setTimeout(() => {
			Animated.parallel(['bottomHeight', 'bottom'].map(property => {
				return Animated.timing(this.state[property], {
					toValue: property == 'bottom' ? 0 : 50,
					duration: 500,
					easing: Easing.linear
				});
			})).start();
		}, 800)


		console.log(offSetX, 'scrollX---onMomentumScrollEnd')

	}

	render() {
		console.log(this.props, 'props')
		const {bottomHeight, bottom} = this.state
		return (
			<View style={[styles.wrap, styles.flex1]}>
				{this._renderTitle()}
				<Search/>
				<NavWrap
					ScreenWidth={ScreenWidth}
				/>
				<ScrollView
					ref={(ref) => this.scrollView = ref}
					onTouchStart={(e) => {
					}}
					onScroll={(e) => {
						let offSetX = e.nativeEvent.contentOffset.x;
						console.log(offSetX, 'scrollX---onScroll')
					}}
					//开始拖拽
					onScrollBeginDrag={(e) => this.onScrollBeginDrag(e)}
					// 停止拖拽
					onScrollEndDrag={(e) => this.onScrollEndDrag(e)}
					// 当滑动后的回调
					onMomentumScrollEnd={(e) => this.onMomentumScrollEnd(e)}
				>
					<GroupItem
						data={this.state.hotelData}
						bgColor='#ff697a'
					/>
					<GroupItem
						data={this.state.airTicketData}
						bgColor='#3d98ff'
					/>
					<GroupItem
						data={this.state.tripData}
						bgColor='#44c522'
					/>
					<GroupItem
						data={this.state.sinceData}
						bgColor='#fc9720'
					/>
				</ScrollView>
				<Animated.View style={[styles.bottomWrap, {height: bottomHeight, bottom: bottom,}]}>
					<Text>bottom</Text>
				</Animated.View>
			</View>
		)
	}
}

var styles = StyleSheet.create({
	wrap: {
		flexDirection: 'column',
		backgroundColor: '#fff',
		position: 'relative',
	},
	flex1: {
		flex: 1,
	},
	bottomWrap: {
		position: 'absolute',
		left: 0,
		backgroundColor: '#eee',
		width: ScreenWidth,
		// alignItems: 'center',
		justifyContent: 'center',
	},
})
